<!DOCTYPE html>
<html lang="en" style="background-color:#fff;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>实名认证</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/set.css" />
    <link rel="stylesheet" href="css/all.css" />
</head>
<style>
	/*正面*/
	.positivePhoto-file{
		position: absolute;
	    top: 1.1rem;
 	    width: 3.92rem;
	    height: 2.42rem;
	    opacity: 0;
	}
	
	/*反面*/
	.negativePhoto-file{
		position: absolute;
	    top: 3.9rem;    
	    width: 3.92rem;
	    height: 2.42rem;
	    opacity: 0;
	}
	/*手持身份证照片*/
	.handPhoto-file{
		position: absolute;
    	top: 6.7rem;
	    width: 3.92rem;
	    height: 2.42rem;
	    opacity: 0;
	}
</style>
<body>
<div>
    <div class="heads">
        <span href="javascript:;" onclick="go()"><img src="img/zuojiantou.png" alt="" class="arrows"></span>
        <h1 class="titles">实名认证</h1>
    </div>
    <div class="middle">
    <form action="">
        <div class="resetUpwd-three">
            <span class="money">真实姓名</span>
            <input type="text" placeholder="请填写身份证上的姓名" class="resetUpwd-out" id="real-name"/>
        </div>
        <div class="resetUpwd-four">
            <span class="money">身份证号</span>
            <input type="text" placeholder="请填写您的身份证号" class="resetUpwd-out" id="idNumber"/>
        </div>
    </form>
        <div class="p-r">
            <p class="upload">上传身份证</p>
            <div href="" class="identity">
            	<img class="identitys" src="img/zhengmian.png" alt="" id="positivePhoto">
            	<input type="file" accept="image/jpg,image/jpeg,image/png" name="file"   onChange="selectImg(this,'positivePhoto',0)" class="positivePhoto-file">
            </div>
            <div href="" class="identity">
            	<img class="identitys" src="img/guowei.png" alt="" id="negativePhoto">
            	<input type="file" accept="image/jpg,image/jpeg,image/png" name="file"   onChange="selectImg(this,'negativePhoto',1)" class="negativePhoto-file">
            </div>
            <div href="" class="identity">
            	<img class="identitys" src="img/touxiang.png" alt="" id="handPhoto">
            	<input type="file" accept="image/jpg,image/jpeg,image/png" name="file"   onChange="selectImg(this,'handPhoto',2)" class="handPhoto-file">
            </div>
	        <div type="button" class="submit" >
	            <button class="submits">提交</button>
	        </div>
        </div>
</div>
</div>
<script src="js/x_rem.js"></script>
<script src="js/jquery.js"></script>
<script src="js/secondLevel.js"></script>
<script src="js/all.js"></script>
<script type="text/javascript">
	
	var positivePhoto = "";     //正面
	var	negativePhoto = "";    //反面
	var	handPhoto = "";       //身份证号
	
	var fullName = $("#real-name");    //姓名
	var idNumber = $("#idNumber");     //身份证号
	
	
	
	
	//换照片
	function selectImg(file,id,tex) {
			 if (!file.files || !file.files[0]){
	            return;
	        }
 			
	        var reader = new FileReader();
	        reader.onload = function (evt) {
	           var replaceSrc = evt.target.result;
	            //更换cropper的图片
	           // $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
				$("#"+id).prop("src",replaceSrc);//显示为图片的形式
				
				
				$.ajax({
					type:"post",
					url:Url+"/base64/upload",
					xhrFields:{
						withCredentials:true
					},
					data:{
						base64:replaceSrc
					},
					success:((data)=>{
						if(data.success){
							
							if(tex == 0){				
			  					positivePhoto =  data.message;
			  					console.log(positivePhoto);
			  				}else if(tex == 1){
			  					negativePhoto =  data.message;
			  					console.log(negativePhoto);
			  				}else{
			  					handPhoto = data.message;
			  					console.log(replaceSrc);
			  				}
				
						}else{
							popup(data.message);
						}
						
					}),
					error:((err)=>{
						console.log(err);
					})
				});
				
				
				
				
				
				
				
				
				
   				 
	        }
	        reader.readAsDataURL(file.files[0]);
	       // base64Images.pust();	
 
		}
	 
	
		//点击提交
		
		
		$(".submits").click(()=>{
			 
			if(fullName.val()==""){
				popup("姓名不能为空");
			}else if(!vali(idNumber, /^[1-9]\d{5}(18|19|2([0-9]))\d{2}(0[0-9]|10|11|12)([0-2][1-9]|30|31)\d{3}[0-9Xx]$/, "请输入正确身份证格式")){
				
			}else if(positivePhoto == ""){
				popup("请上传身份证正面照片");
			}else if(negativePhoto == ""){
				popup("请上传身份证反面照片");
			}else if(handPhoto == ""){
				popup("请上传手持身份证照片");
			}else{
				$.ajax({
			 		type:"post",
			 		url:Url+"/user/authentication",
			 		xhrFields:{
			 			withCredentials:true
			 		},
					data:{
						"fullName": fullName.val(),
						"idNumber": idNumber.val(),
						"positivePhoto": positivePhoto,
						"negativePhoto": negativePhoto,
						"handPhoto" : handPhoto
					},
					success:((data)=>{
				
						popup(data.message);
					}),
					error:((err)=>{
						console.log(err);
					})
			 	});
			}
			
  
		})
	
	
	
	
	
</script>
</body>
</html>